<template>
  <view class="login-container">
    <!-- 标题 -->
    <text class="title">用户登录</text>

    <!-- 用户名输入框 -->
    <view class="input-group">
      <text class="label">用户名：</text>
      <input
        v-model="username"
        class="input"
        placeholder="请输入用户名"
        placeholder-class="placeholder"
      />
    </view>

    <!-- 密码输入框 -->
    <view class="input-group">
      <text class="label">密码：</text>
      <input
        v-model="password"
        class="input"
        placeholder="请输入密码"
        placeholder-class="placeholder"
        password
      />
    </view>

    <!-- 登录按钮 -->
    <button class="login-button" @click="handleLogin">登录</button>

    <!-- 提示信息 -->
    <text v-if="errorMessage" class="error-message">{{ errorMessage }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useMemberStore } from '@/stores'

import axios from 'axios'
// 表单数据
const username = ref('')
const password = ref('')

// 错误提示信息
const errorMessage = ref('')

// 登录逻辑
const handleLogin = async () => {
  // 简单表单验证
  if (!username.value || !password.value) {
    errorMessage.value = '用户名和密码不能为空'
    return
  }

  // 模拟登录请求
  uni.showLoading({
    title: '登录中...',
  })
  // const res = await axios.post('http://124.70.51.78:8082/oauth/login', {
  const res = await axios.post('http://192.168.31.184:8082/oauth/login', {

    username: username.value,
    password: password.value,
  })
  // loginSuccess(res)
  console.log(res, 'res')

  setTimeout(() => {
    uni.hideLoading()
    if (res.data.code == 200) {
      // 保存会员信息
      const memberStore = useMemberStore()
      memberStore.setProfile(res.data.data)
      console.log(memberStore, 'memberStore')

      uni.showToast({
        title: '登录成功',
        icon: 'success',
      })
      // 跳转到首页
      uni.navigateTo({
        url: '/pages/device/device',
      })
    } else {
      errorMessage.value = '用户名或密码错误'
    }
  }, 1000)
}
</script>

<style scoped>
/* 页面容器 */
.login-container {
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 标题 */
.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 40px;
}

/* 输入框组 */
.input-group {
  width: 100%;
  margin-bottom: 20px;
}

/* 输入框标签 */
.label {
  font-size: 16px;
  margin-bottom: 8px;
  display: block;
}

/* 输入框 */
.input {
  width: 100%;
  height: 40px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

/* 占位符样式 */
.placeholder {
  color: #999;
}

/* 登录按钮 */
.login-button {
  width: 100%;
  height: 40px;
  background-color: #007aff;
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  margin-top: 20px;
}

/* 错误提示信息 */
.error-message {
  color: #ff0000;
  font-size: 14px;
  margin-top: 10px;
}
</style>
